import axios from 'axios';
import React, { useState, useEffect } from 'react'
import Draggable from 'react-draggable';
const Shangchuan = () => {
    const [list, setList] = useState([]);
    const [smList, setsmList] = useState([]);
    let newlist = [];
    useEffect(() => {
        const url = "http://192.168.72.166:8080/api/getUserUploadDatas";
        axios.get(url).then(res => {
            const data = res.data.data;
            data.forEach((item) => {
                let img = "http://192.168.72.166:8080/" + item.upload_image;
                item.upload_image = img;
            });
            setList(data)
        })
        axios.get("http://192.168.72.166:8080/api/getUsers").then(res => {
            const datas = res.data.data;
            datas.forEach((item) => {
                if (item.user_name == localStorage.getItem('data')) {
                    newlist.push(item.user_id)
                }
            });
            setsmList(newlist)
        })
    }, [])
    const deleteImg = (id) => {
        const url = "http://192.168.72.166:8080/api/delUserUploadDatas/" + id;
        axios.delete(url).then(res => {
            window.location.reload();
        })
    }
    return (
        <div className='upload'>
            <div className='upload'>
                <form action="http://192.168.72.166:8080/api/postUserUploadDatas"
                    method="post"
                    enctype="multipart/form-data" target='stop'>
                    <input type="hidden" name="user_id" value={smList[0]} />
                    <input style={{ margin: '10px', fontSize: '15px', color: 'brown', backgroundColor: 'white', border: '1px dotted brown', borderRadius: '3px', }}
                        type="file" name="file" multiple="multiple" accept=".png, .jpg, .jpeg, .gif, .bmp" />
                    <input
                        style={{ margin: '10px', fontSize: '15px', color: 'brown', backgroundColor: 'white', border: '1px dotted brown', borderRadius: '3px', }}
                        type="submit" value="上传图片" onClick={() => { window.location.reload(); }} />
                </form>
                <iframe name="stop" style={{ display: "none" }}></iframe>
                <div className='showImg'>
                    {
                        list.map(item => {
                            if (smList.some(it => it == item.user_id)) {
                                return (
                                    <div>
                                        <div className='showImg-1'><Draggable><img width='120px' height='100px' src={item.upload_image} /></Draggable></div>
                                        <button onClick={() => deleteImg(item.upload_id)}>删除</button>
                                    </div>
                                )
                            }
                        })
                    }
                </div>
            </div>

        </div>
    )
}
export default Shangchuan